﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" content="chrome=1, IE=edge" http-equiv="X-UA-Compatible" />
  
    <title>WWT Web Client Local View</title>
    <script src="http://www.worldwidetelescope.org/webclient/sdk/wwtsdk.js"></script>
    <script>

    // Create the WorldWide telescope object variable

    var wwt;

    // Create variables to hold the changeable settings

	var bShowCrosshairs = true;
	var bShowUI = true;
	var bShowFigures = true;

	var defaultLat;
	var defaultLng;
	var defaultAlt;

	// This function initializes the wwt object and registers the wwtReady event
	// once the initialization is done the wwtReady event will be fired
	function initialize() {
	    wwt = wwtlib.WWTControl.initControl("WWTCanvas");
	    wwt.add_ready(wwtReady);
	}

    // A simple function to toggle the settings
    // This function is called from the checkbox entries setup in the html table

	function toggleSetting(text) {
	    switch (text) {
	        case 'ShowUI':
	            bShowUI = !bShowUI;
	            wwt.hideUI(!bShowUI);
	            break;

	        case 'ShowCrosshairs':
	            bShowCrosshairs = !bShowCrosshairs;
	            wwt.settings.set_showCrosshairs(bShowCrosshairs);
	            break;

	        case 'ShowFigures':
	            bShowFigures = !bShowFigures;
	            wwt.settings.set_showConstellationFigures(bShowFigures);
	            break;

	    }
	}

	function localView(text) {
	    switch (text) {
	        case 'Sydney':
	            wwt.settings.set_locationLat(-33.52);
	            wwt.settings.set_locationLng(151.125);
	            wwt.settings.set_locationAltitude(34);
	            wwt.settings.set_localHorizonMode(true);
	            break;

	        case 'London':
	            wwt.settings.set_locationLat(51.31);
	            wwt.settings.set_locationLng(-0.06);
	            wwt.settings.set_locationAltitude(21);
	            wwt.settings.set_localHorizonMode(true);
	            break;

	        case 'San Francisco':
	            wwt.settings.set_locationLat(37.455);
	            wwt.settings.set_locationLng(-122.262);
	            wwt.settings.set_locationAltitude(72);
	            wwt.settings.set_localHorizonMode(true);
	            break;

	        case 'default':
	            wwt.settings.set_locationLat(defaultLat);
	            wwt.settings.set_locationLng(defaultLng);
	            wwt.settings.set_locationAltitude(defaultAlt);
	            wwt.settings.set_localHorizonMode(true);
	            break;
	    }
	    document.getElementById("currentview").value = text;
	}

    // The wwtReady function is called by the WWT Web Control software
    // This function sets up the wwt object, and the initial defaults

	function wwtReady() {
	    wwt.settings.set_showCrosshairs(bShowCrosshairs);
	    wwt.settings.set_showConstellationFigures(bShowFigures);
	    wwt.hideUI(!bShowUI);

	    defaultLat = wwt.settings.get_locationLat();
	    defaultLng = wwt.settings.get_locationLng();
	    defaultAlt = wwt.settings.get_locationAltitude();

	}

    </script>

</head>

<body onload="initialize()" >

<!-- The body section creates a table with two columns. The first contains the -->
<!-- WWTControl object that is the WWT web client. And the second a table within-->
<!-- the table, containing some buttons and checkboxes.-->

<table border="2" bgcolor="lightgrey">
	<tr><td>
        <div id="WorldWideTelescopeControlHost">
            <div id="WWTCanvas" style="width: 750px; height: 750px; border-style: none; border-width: 0px;">
            </div>
    </div>
	</td><td>

	<table border="2" cellspacing="4" cellpadding="4" bgcolor="gold">
	
	<tr>
	<th colspan="2"><h2>WWT Web Client Local View</h2></th>
	</tr>
			
	<tr>
	<th colspan = "2">Settings</th>
	</tr>
	
<!--	<tr>
		<td> Show UI </td>
		<td> <input id="UI" type="checkbox" checked="checked" onclick="toggleSetting('ShowUI');"/></td>

	</tr>-->
	
	<tr>
		<td> Show Crosshairs</td>
		<td> <input id="Crosshairs" type="checkbox" checked="checked" onclick="toggleSetting('ShowCrosshairs');"/></td>

	</tr>

	<tr>
		<td> Show Figures </td>
		<td> <input id="Figures" type="checkbox" checked="checked" onclick="toggleSetting('ShowFigures');"/></td>

	</tr>
	<tr><th colspan = "2">Current View</th></tr>
	
	<tr>
	<td>City:</td>
		<td> <input id="currentview" type="text" value="default"/></td>
	</tr>

		<tr>
	<th colspan = "2">Cities</th>
	</tr>
	<tr>
	<th colspan = "2"> 
	<input type="button" id="Sydney" value="View from Sydney" onclick="localView('Sydney');"/>
	</th>		
	</tr>
		<tr>
	<th colspan = "2"> 
	<input type="button" id="London" value="View from London" onclick="localView('London');"/>
	</th>		
	</tr>
		<tr>
	<th colspan = "2"> 
	<input type="button" id="San Francisco" value="View from San Francisco" onclick="localView('San Francisco');"/>
	</th>		
	</tr>
			<tr>
	<th colspan = "2"> 
	<input type="button" id="default" value="default" onclick="localView('default');"/>
	</th>		
	</tr>
</table>
</td>
</tr>
</table>

</body>
</html>
